<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <div th:fragment="orderList">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2>待处理订单</h2>
            <button type="button" class="btn btn-primary" onclick="refreshOrders()">
                <i class='bx bx-refresh'></i> 刷新
            </button>
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>预约时间</th>
                        <th>回收地址</th>
                        <th>联系人</th>
                        <th>联系电话</th>
                        <th>回收物品</th>
                        <th>预估重量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:if="${#lists.isEmpty(orders)}">
                        <td colspan="8" class="text-center">暂无待处理订单</td>
                    </tr>
                    <tr th:each="order : ${orders}">
                        <td th:text="${order.orderNo}">-</td>
                        <td th:text="${#temporals.format(order.appointmentTime, 'yyyy-MM-dd HH:mm')}">-</td>
                        <td th:text="${order.address}">-</td>
                        <td th:text="${userMap[order.userId]?.realName}">-</td>
                        <td th:text="${order.contactPhone}">-</td>
                        <td>
                            <span class="badge bg-info" th:each="item : ${order.itemType}" 
                                  th:text="${item == 'PLASTIC' ? '塑料' : 
                                           item == 'METAL' ? '金属' : 
                                           item == 'PAPER' ? '纸类' :
                                           item == 'GLASS' ? '玻璃' :
                                           item == 'FABRIC' ? '布料' :
                                           item == 'ELECTRONICS' ? '电子产品' : item}">物品</span>
                        </td>
                        <td th:text="${order.estimatedWeight != null ? #numbers.formatDecimal(order.estimatedWeight, 1, 1) + ' kg' : '-'}">-</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm" 
                                    th:onclick="'acceptOrder(' + ${order.id} + ')'"
                                    th:disabled="${order.collectorId != null}">
                                <i class='bx bx-check'></i> 接单
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 添加JavaScript代码 -->
    <script th:inline="javascript">
    function acceptOrder(orderId) {
        if (!confirm('确定要接此订单吗？')) {
            return;
        }
        
        fetch(`/collector/orders/accept/${orderId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('接单失败');
            }
            return response.text();
        })
        .then(() => {
            alert('接单成功！');
            refreshOrders();
        })
        .catch(error => {
            console.error('接单失败:', error);
            alert('接单失败：' + error.message);
        });
    }

    function refreshOrders() {
        location.reload();
    }
    </script>
</body>
</html>